AutoTriggerer.constructor   B
last analyzed

Complexity

Conditions 1
Paths 1

Size

Total Lines 188

Duplication

Lines 0
Ratio 0 %

Importance

Changes 1
Bugs 0 Features 0
Metric Value
cc 1
c 1
b 0
f 0
nc 1
nop 2
dl 0
loc 188
rs 8.2857

8 Functions

Rating   Name   Duplication   Size   Complexity  
A threematfa.js ➔ hideAjaxLoadingInit 0 15 2
A threematfa.js ➔ init 0 13 1
B threematfa.js ➔ start 0 25 3
A threematfa.js ➔ showAjaxLoading 0 9 4
B threematfa.js ➔ errorHandler 0 26 5
A threematfa.js ➔ triggerCheck 0 12 2
A threematfa.js ➔ hideAjaxLoading 0 10 4
A threematfa.js ➔ stop 0 16 1

How to fix   Long Method   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

1
/**
2
 * @file JS functions used for Threema Gateway 2FA login methods.
3
 *
4
 * @author rugk
5
 * @copyright Copyright (c) 2016 rugk
6
 * @license MIT
7
 */
8
9
jQuery(document).ready(function() {
10
    'use strict';
11
12
    // global variable
13
    window.DEBUG = true /* BUILD ADJUST */;
14
15
    QrCodeCreator.createQr();
16
    AutoTriggerer.init();
17
    AutoTriggerer.triggerStart();
18
});
19
20
/**
21
 * QrCodeCreator - Creates QR code in all specified areas.
22
 *
23
 * Needs jquery.qrcode. (tested with v0.12.0)
24
 *
25
 * @return {object} Methods: createQr
26
 */
27
var QrCodeCreator = (function () {
28
    'use strict';
29
    var me = {};
30
    var qrCodeElem = '.threemagw_createqr';
31
32
    /**
33
     * createQr - Create the QR codes out of the given data.
34
     *
35
     */
36
    me.createQr = function createQr() {
37
        var $el = $(qrCodeElem);
38
39
        // do not continue if library is not loaded
40
        if (!jQuery().qrcode) {
41
            return;
42
        }
43
44
        $el.qrcode({
45
            text: $el.data('qrcode')
46
        });
47
    };
48
49
    return me;
50
})();
51
52
/**
53
 * AutoTriggerer - Automatically submits the form and hides
54
 * any errors, which may be occuring.
55
 *
56
 * @param  {object} window
57
 * @param  {object} document
58
 * @return {object} Methods: init, triggerStart, triggerStop
59
 */
60
var AutoTriggerer = (function(window, document) {
61
    'use strict';
62
    var me = {};
63
    var indicatorElem = '#threemagw_auto_trigger';
64
    var period = 2000;
65
    var expectedError;
66
67
    var active;
68
69
    var $indicator;
70
    var $form;
71
    var $submitUnit;
72
    var $ajaxProgressWrapper = null;
73
74
    /**
75
     * triggerCheck - triggers a new form check
76
     *
77
     * @private
78
     */
79
    function triggerCheck() {
80
        if (!active) {
81
            return;
82
        }
83
84
        // hide AJAX loading indicator
85
        hideAjaxLoading();
86
        // submit form to trigger AJAX request
87
        $form.submit();
88
        // reregister timeout
89
        setTimeout(triggerCheck, period);
90
    }
91
92
    /**
93
     * errorHandler - handles errors when verifying the 2FA mode
94
     *
95
     * @this form, which triggered the error
96
     * @private
97
     * @param {object} event jQuery event
98
     */
99
    function errorHandler(event) {
100
        // allow display of AJAX loading indicator again
101
        showAjaxLoading();
102
103
        // only handle error if this is indeed our form
104
        if (!$form.is(event.target)) { // comparing against this would be possible too
105
            return;
106
        }
107
108
        var error = event.ajaxData.error;
109
110
        // only handle the expected error
111
        if (error.length !== 1 || error[0] !== expectedError) {
112
            // when other unexpected error happens, stop whole module
113
            // so we fall back to the "traditional" input
114
            me.triggerStop();
115
            return;
116
        }
117
118
        // apart from logging the event, just ignore it
119
        if (window.DEBUG) console.log(event);
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
120
        console.log('The automatic form submission failed: ' + error);
121
122
        // prevent error overlay from appearing
123
        event.preventDefault();
124
    }
125
126
    /**
127
     * hideAjaxLoadingInit - wraps ajax loader, so it can be hidden later
128
     *
129
     * @private
130
     */
131
    function hideAjaxLoadingInit() {
132
        // unregister myself
133
        $(document).off('ajaxStart', hideAjaxLoadingInit);
134
135
        // wrap loading indicator into div
136
        if (window.DEBUG) console.log('Wrapping AJAX Loading indicator…');
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
137
        $ajaxProgressWrapper = $('#AjaxProgress').wrap('<div></div>').parent();
138
139
        // as an immediate measure we need to hide the progress indicator right
140
        // now as it might otherwise be shown one time
141
        $('#AjaxProgress').hide();
142
143
        // and finally hide
144
        hideAjaxLoading();
145
    }
146
147
    /**
148
     * hideAjaxLoading - hides the AJAX loading overlay
149
     *
150
     * @private
151
     */
152
    function hideAjaxLoading() {
153
        // let XenForo create element if needed
154
        if ($ajaxProgressWrapper === null || !$ajaxProgressWrapper.length) {
155
            // as it is only created when an ajax call starts, we need to wait for it and then wrap the indicator
156
            $(document).on('ajaxStart', hideAjaxLoadingInit);
157
        } else {
158
            if (window.DEBUG) console.log('hide ajax loading indicator', $ajaxProgressWrapper);
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
159
            $ajaxProgressWrapper.hide();
160
        }
161
    }
162
163
    /**
164
     * hideAjaxLoading - shows the AJAX loading overlay
165
     *
166
     * @private
167
     */
168
    function showAjaxLoading() {
169
        // ignore this, if element does not exist
170
        if ($ajaxProgressWrapper === null || !$ajaxProgressWrapper.length) {
171
            return;
172
        }
173
174
        if (window.DEBUG) console.log('show ajax loading indicator', $ajaxProgressWrapper);
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
175
        $ajaxProgressWrapper.show();
176
    }
177
178
    /**
179
     * init - initialize everything
180
     */
181
    me.init = function init() {
182
        // get indicator
183
        $indicator = $(indicatorElem);
184
185
        // set variables
186
        $form = $('form.xenForm.AutoValidator');
187
        $submitUnit = $form.find('.submitUnit .button.primary').parents().eq(1);
188
        expectedError = $indicator.data('expectederror');
189
190
        // hide button/unit as it is useless with autoTriggering enabled
191
        // replace elements
192
        $submitUnit.after($indicator);
193
    };
194
195
    /**
196
     * triggerStart - starts auto triggering and hides the usual input via
197
     * button
198
     */
199
    me.triggerStart = function start() {
200
        // prevent multiple starts
201
        if (active) {
202
            return;
203
        }
204
205
        // if indicator is missing. prevent acivation
206
        if (!$indicator.length) {
207
            return;
208
        }
209
210
        // activate the module
211
        active = true;
212
        // enable the periodical check
213
        setTimeout(triggerCheck, period);
214
215
        // register/overwrite error handler
216
        $form.on('AutoValidationError', errorHandler);
217
218
        // finally show status & hide button as it is useless now
219
        $indicator.show();
220
        $submitUnit.children().hide();
221
222
        console.log('AutoTriggerer enabled.');
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
223
    };
224
225
    /**
226
     * triggerStop - stops auto triggering and offers the usual button input
227
     * method again
228
     */
229
    me.triggerStop = function stop() {
230
        // prevent next trigger
231
        active = false;
232
233
        // make sure the loading indicator is there again
234
        showAjaxLoading();
235
236
        // unregsiter error handler
237
        $form.off('AutoValidationError', errorHandler);
238
239
        // restore button and hide own indicator
240
        $indicator.hide();
241
        $submitUnit.children().show();
242
243
        console.log('AutoTriggerer disabled.');
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
244
    };
245
246
    return me;
247
})(window, document);
248